import React from 'react';
import { isEqual, isEmpty } from 'lodash';
import {WeaErrorPage, WeaLocaleProvider, WeaTools} from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;
import OpToolbar from '../common/OpToolbar';
import TitleTabPane from '../common/TitleTabPane';
import { doPrev, doNext, handleWidth } from '../../util/common';
//tab的标题组件
class Title extends React.Component {
    componentDidMount() {
        const { config, tabids } = this.props;
        const { eid, header } = config.item;
        handleWidth(eid,config.params.hpid,tabids.length,header.canHeadbar, header.displayPosition);
    }
    componentDidUpdate() {
        const { config, tabids } = this.props;
        const { eid, header } = config.item;
        handleWidth(eid,config.params.hpid,tabids.length,header.canHeadbar, header.displayPosition);
    }
    shouldComponentUpdate(nextProps){
        return !isEqual(this.props, nextProps)
    }
    render() {
        const tdStyle1={width: 'auto', marginRight: '10px', paddingTop: '5px', verticalAlign: 'top', backgroundSize: '100% 100%', height: '32px',marginTop: '-8px'};
        const tdStyle={width: this.props.tabwidth + 'px', paddingTop: '5px', verticalAlign: 'top', backgroundSize: '100% 100%', height: '32px',marginTop: '-7px'};
        const { currentTab, config={}, tabids = [], titles = [], counts, handleRefresh, handleDelete, handleTabData, fontSizeMp } = this.props;
        const { eid, ebaseid } = config.params;
        let { fontStyle = {} } = config.item;
        if(!isEmpty(fontSizeMp)){
            fontStyle = fontSizeMp;
        }
        // let tHtml=titles.map((title, i)=> {
        //     if (!isEmpty(counts)) {
        //         if ('0' !== counts[i]) {
        //              title += ' (<font style="color:red">' + counts[i] + '</font>)';
        //         }
        //     }
        //     let name = title;
        //     title=title.replace(`<font style="color:red">`,"");
        //     title=title.replace(`</font>`,"");
        //     const className = tabids[i] == currentTab ? `tab2selected wea-f${fontStyle.tab1fontsize || 12}` : `tab2unselected wea-f${fontStyle.tab2fontsize || 12}`;
        //     return <td title={title} data-tabid={tabids[i]} style={this.props.methodvalue == '2'? tdStyle1 : tdStyle} className={className} onClick={handleTabData.bind(this, tabids[i])} dangerouslySetInnerHTML={{__html:name}}></td>
        // });
        let className = tabids.length <= 1 ? 'nodisplay' : '';
        return <div id={`titleContainer_${eid}`} className={`titlecontainer ${className}`}>
                {/*{<div id={`tabnavprev_${eid}`} className="picturebackhp" onClick={doPrev.bind(this,eid)}></div>}*/}
                {/*<div id={`tabContainer_${eid}`} className="tabcontainer tab2">*/}
                    {/*<table style={ { tableLayout:"fixed",borderCollapse:'collapse'}} height="32">*/}
                      {/*<tbody height="32">*/}
                        {/*<tr height="32" style={{whiteSpace: 'nowrap'}}>*/}
                            {/*{tHtml}*/}
                        {/*</tr>*/}
                      {/*</tbody>*/}
                    {/*</table>*/}
                {/*</div>*/}
            <TitleTabPane ecId={`${this && this.props && this.props.ecId || ''}_TitleTabPane@kftlze`} datas={this.props} fontStyle={fontStyle} tdStyle={tdStyle} tdStyle1={tdStyle1} ebaseid={ebaseid}/>
                {/*{<div id={`tabnavnext_${eid}`} className="picturenexthp" onClick={doNext.bind(this,eid)}></div>}*/}
                {!config.item.header.canHeadbar ? <OpToolbar ecId={`${this && this.props && this.props.ecId || ''}_OpToolbar@l0x853`} config={config} clsname={className} handleRefresh={handleRefresh} handleDelete={handleDelete}/> : ''}
              </div>
      }
}
class MyErrorHandler extends React.Component {
    render() {
        const hasErrorMsg=this.props.error && this.props.error !=="";
            return ( <WeaErrorPage ecId={`${this && this.props && this.props.ecId || ''}_WeaErrorPage@bnv4ou`} msg={ hasErrorMsg ? this.props.error : getLabel(385218,"对不起，该页面异常，请联系管理员！")} />
        );
    }
}
Title = WeaTools.tryCatch(React, MyErrorHandler, { error: "" })(Title);
export default Title;
